<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>kdbxweb Manual Tests</title>
    <script src="../dist/kdbxweb.js"></script>
</head>
<body>
<div><input type="text" placeholder="password" id="pass"></div>
<div>key: <input type="file" id="key" /></div>
<div>kdbx: <input type="file" id="file" /></div>
<pre id="res"></pre>
<script>
    var res = document.getElementById('res');
    var keyfile;
    function handleFileSelect(evt) {
        var reader = new FileReader();
        reader.onload = function(e) {
            res.innerHTML = 'working...\n';
            var start = performance.now();
            try {
                var pass = document.getElementById('pass').value;
                kdbxweb.Kdbx.load(e.target.result,
                    new kdbxweb.Credentials(kdbxweb.ProtectedValue.fromString(pass), keyfile)).then(function(db) {
                        window.db = db;
                        res.innerHTML += 'done: ' + Math.round(performance.now() - start) + 'ms\nwindow.db contains the db';
                    }).catch(function(err) {
                        res.innerHTML += 'error: ' + err + ', ' + (performance.now() - start) + 'ms\n';
                    });
            } catch (e) {
                res.innerHTML += 'error: ' + e + ', ' + (performance.now() - start) + 'ms\n';
            }
        };
        reader.readAsArrayBuffer(evt.target.files[0]);
    }
    function handleKeySelect(evt) {
        var reader = new FileReader();
        reader.onload = function(e) { keyfile = e.target.result; };
        reader.readAsArrayBuffer(evt.target.files[0]);
    }
    document.getElementById('file').addEventListener('change', handleFileSelect, false);
    document.getElementById('key').addEventListener('change', handleKeySelect, false);
</script>
</body>
</html>